<template>
<div>
  <h2>库存流水明细</h2>
  <!-- 表单 -->
    <el-col :span="22"><div class="grid-content bg-purple">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="仓库查询">
      <el-select v-model="formInline.warehouseName" placeholder="全部">
        <el-option label="广州仓" valu="广州仓"></el-option>
        <el-option label="湖北仓" value="湖北仓"></el-option>
        <el-option label="河南仓" value="河南仓"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="formInline.model" placeholder="全部">
          <el-option label="出库" value="出库"></el-option>
          <el-option label="入库" value="入库"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流水时间">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      </el-form>
    </div></el-col>
    <el-col :span="2"><div class="grid-content bg-purple">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="onSubmit" >查询</el-button>
      </el-form-item>
      </el-form>
    </div></el-col><!-- 查询 -->
  <el-col :span="22"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="2"><div class="grid-content bg-purple">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div></el-col><!-- 重置 -->
<!--表格-->
  <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
    <el-table-column sortable prop="logId" label="流水号" width="300"></el-table-column>
    <el-table-column sortable prop="createTime" label="创建时间" width="300">
      <template slot-scope="scope">
        <div>{{scope.row.createTime|timestampToTime}}</div>
      </template>
    </el-table-column>
    <el-table-column sortable prop="model" label="类型" width="300"></el-table-column>
    <el-table-column sortable prop="documentNo" label="单据号" width="300"></el-table-column>
    <el-table-column sortable prop="warehouseName" label="关联仓库名称" width="300"></el-table-column>
    <el-table-column sortable prop="productBarcode" label="商品条码" width="300"></el-table-column>
    <el-table-column sortable prop="productName" label="商品名称" width="300"></el-table-column>
    <el-table-column sortable prop="productCode" label="商品货号" width="300"></el-table-column>
    <el-table-column sortable prop="productSize" label="商品尺寸" width="300"></el-table-column>
    <el-table-column sortable prop="quatity" label="数量" width="300"></el-table-column>
    <el-table-column sortable prop="operator" label="操作人" width="300"></el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <Pagination v-bind:child-msg="pageparam" v-model="pageparam" @callFather="callFather"></Pagination>
</div>
</template>

<script>
import Pagination from "../../components/Pagination";
import {inventoryLogList} from "../../api/inventoryLogMG";

export default {
  name: "inventoryLog",
  data() {
    return {
      loading: false, //是显示加载
      listData: [], //用户数据
      time: '',//流水时间
      formInline: {
        pageNum: 1,
        pageSize: 10,
        warehouseName: '',
        model:''
      },//下拉栏信息
      pageparam: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }, // 分页参数
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 创建完毕   初始化数据 最好 在mounted初始
   */
  created() {
    this.getdata(this.formInline)
  },
  methods: {
    getdata(formInline) {
      console.log(formInline)
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      inventoryLogList(formInline)
        .then(res => {  // 后端响应
          this.loading = false
          if (res.code != 20000) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            const pageInfo = res.data;  //先得到pageInfo   (pageHelper 中的分页信息)
            this.listData = pageInfo.list;
            // 分页赋值
            this.pageparam.currentPage = this.formInline.pageNum
            this.pageparam.pageSize = this.formInline.pageSize
            this.pageparam.total = pageInfo.total
            console.log(this.pageparam)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户信息加载失败，请稍后再试！')
        })
    },//刷新页面
    onSubmit() {
      console.log('submit!');
      this.getdata(this.formInline)
    },//查询
    resetForm() {
      this.formInline.warehouseName='';
      this.formInline.model='';
      this.time='',
      this.getdata(this.formInline)
    },//重置
    callFather(pageparam) {
      this.formInline.pageNum = pageparam.pageNum;
      this.formInline.pageSize = pageparam.pageSize;
      this.getdata(this.formInline)
    },//分页
  }
}
</script>

<style scoped>
.bg-purple {
  background: #ffffff;
}
.grid-content {
  border-radius: 3px;
  min-height: 36px;
}

</style>
